import { useState, useEffect } from 'react';
import { useIntl } from 'umi';
import {
  Drawer,
  Form,
  Input,
  Select,
  Button,
  message,
  Row,
  Col,
  Switch,
} from 'antd';

const { Option } = Select;

import request from '@/utils/request';
import AreaCode from '@/data/areaCode';
import Labels from '@/pages/components/labels';
import { leadStagefn, leadSourcefn, priorityfn } from '@/data/options';

interface PropsType {
  visible: boolean;
  user: any;
  onClose: any;
  getList: any;
  onSuccess: any;
}

const EditContactComponent = (props: PropsType) => {
  const intl = useIntl();
  const [form] = Form.useForm();

  const leadStage = leadStagefn();
  const leadSource = leadSourcefn();
  const priority = priorityfn();

  const [userList, setUserList] = useState([]);

  useEffect(() => {
    if (props.visible) {
      // props.user.areacodephone = props.user.areaCode + props.user.phone;
      form.setFieldsValue(props.user);
      getTeam();
    }
  }, [props.visible]);

  const getTeam = () => {
    request.get('/team/get').then((res) => {
      setUserList(res.data.userList);
    });
  };

  const onClose = () => {
    form.resetFields();
    props.onClose && props.onClose();
  };

  const onSubmitBtn = () => {
    form.submit();
  };
  const onSubmit = (values: any) => {
    const data = Object.assign({}, props.user, values);
    data.subscriber = data.subscriber === false ? 'N' : 'Y';
    let url = '/contact/create';
    let type = 'post';
    if (data.id) {
      url = '/contact/edit';
      type = 'PATCH';
    }
    request({
      url,
      method: type,
      data,
    })
      .then((res) => {
        message.success(intl.formatMessage({ id: 'savesuccess' }));
        onClose();
        props.onSuccess && props.onSuccess(res.data.contact);
        props.getList && props.getList();
      })
      .catch((err) => {
        message.error(err.message);
      });
  };

  const formDefaultValues = {
    // areaCode: '86',
    subscriber: true,
  };

  return (
    <Drawer
      title={
        intl.formatMessage({ id: props.user.id ? 'editcontacts' : 'createcontacts' })
      }
      placement="right"
      width="520"
      closable={false}
      onClose={onClose}
      visible={props.visible}
      bodyStyle={{ padding: '30px 40px' }}
      footer={
        <div
          style={{
            textAlign: 'right',
          }}
        >
          <Button onClick={onClose} style={{ marginRight: 8 }}>
            {intl.formatMessage({ id: 'cancel' })}
          </Button>
          <Button onClick={onSubmitBtn} type="primary">
            {intl.formatMessage({
              id: props.user.id ? 'updatecontacts' : 'createcontacts',
            })}
          </Button>
        </div>
      }
    >
      <Form
        form={form}
        layout="vertical"
        onFinish={onSubmit}
        initialValues={formDefaultValues}
      >
        <Row>
          <Col span={11}>
            <Form.Item label={intl.formatMessage({ id: 'firstname' })} name="name">
              <Input
                placeholder={intl.formatMessage({ id: 'enterfirstname' })}
              />
            </Form.Item>
          </Col>
          <Col span={11} offset={2}>
            <Form.Item
              label={intl.formatMessage({ id: 'lastname' })}
              name="lastName"
            >
              <Input
                placeholder={intl.formatMessage({ id: 'enterlastname' })}
              />
            </Form.Item>
          </Col>
        </Row>

        <Form.Item
          label={intl.formatMessage({ id: 'email' })}
          name="email"
          rules={[
            {
              type: 'email',
              message: intl.formatMessage({ id: 'pleaseinputthecorrectemail' }),
            },
          ]}
        >
          <Input placeholder={intl.formatMessage({ id: 'enteremail' })} />
        </Form.Item>

        <Form.Item
          label={intl.formatMessage({ id: 'phonenumber' })}
          name="phone"
          rules={[
            {
              required: true,
              message: intl.formatMessage({
                id: 'pleaseinputyourphonenumber',
              }),
            },
          ]}
        >
          <Input
            disabled={props.user.id}
            placeholder={intl.formatMessage({ id: 'enterphonenumber' })}
          />
        </Form.Item>

        <Form.Item
          label={intl.formatMessage({ id: 'campanyname' })}
          name="companyName"
        >
          <Input placeholder={intl.formatMessage({ id: 'entercompanyname' })} />
        </Form.Item>

        <Form.Item
          label={intl.formatMessage({ id: 'jobtitle' })}
          name="jobTitle"
        >
          <Input placeholder={intl.formatMessage({ id: 'enterjobtitle' })} />
        </Form.Item>
        <Form.Item
          label={intl.formatMessage({ id: 'contactowner' })}
          name="assignedId"
        >
          <Select
            showSearch
            placeholder={intl.formatMessage({ id: 'p_s_contactowner' })}
          >
            {userList.map((n) => (
              <Option key={n.id} value={n.id}>
                {n.name}
              </Option>
            ))}
          </Select>
        </Form.Item>
        <Form.Item
          label={intl.formatMessage({ id: 'leadstage' })}
          name="leadStage"
        >
          <Select
            showSearch
            placeholder={intl.formatMessage({ id: 'p_s_leadstage' })}
          >
            {leadStage.map((n) => (
              <Option key={n.value} value={n.value}>
                {n.label}
              </Option>
            ))}
          </Select>
        </Form.Item>
        <Form.Item
          label={intl.formatMessage({ id: 'leadsource' })}
          name="leadSource"
        >
          <Select
            showSearch
            placeholder={intl.formatMessage({ id: 'p_s_leadsource' })}
          >
            {leadSource.map((n) => (
              <Option key={n.value} value={n.value}>
                {n.label}
              </Option>
            ))}
          </Select>
        </Form.Item>
        <Form.Item
          label={intl.formatMessage({ id: 'priority' })}
          name="priority"
        >
          <Select
            showSearch
            placeholder={intl.formatMessage({ id: 'p_s_priority' })}
          >
            {priority.map((n) => (
              <Option key={n.value} value={n.value}>
                {n.label}
              </Option>
            ))}
          </Select>
        </Form.Item>
        {/* <Form.Item label={intl.formatMessage({ id: 'country' })} name="country" rules={[{required: true, message: intl.formatMessage({ id: 'p_s_country' })}]}>
        <Select
          showSearch
          placeholder={intl.formatMessage({ id: 'p_s_country' })}
        >
          <Option value="demo">Demo</Option>
        </Select>
      </Form.Item> */}
        <Form.Item
          label={intl.formatMessage({ id: 'subscriber' })}
          help={intl.formatMessage({ id: 'subscriber_test' })}
          name="subscriber"
        >
          <Switch defaultChecked />
        </Form.Item>

        {props.user.id && !props.hideLabels ? (
          <div style={{ margin: '0 -30px' }}>
            <Labels contactId={props.user.id} />
          </div>
        ) : null}
      </Form>
    </Drawer>
  );
};

export default EditContactComponent;
